<template>
	<view>
		<image src="/static/img/logo.png" mode="widthFix"
			class="login-logo"></image>
		<view class="login-card" v-if="state == 1">
			<view class="login-title">手机密码登录</view>
			<view class="login-label">手机号码</view>
			<input v-model="mobile" placeholder="请输入手机号码" class="login-input" />
			<view class="login-label">登录密码</view>
			<input v-model="password" placeholder="请输入登录密码" type="password" class="login-input" />
		</view>
		<checkbox-group v-if="state == 1" @change="rememberC" class="rememberStyle">
			<label>
				<checkbox value="true" checked="true" />记住密码
			</label>
		</checkbox-group>
		<view class="login-btn" @tap="submitLogin()" v-if="state == 1">立即登录</view>
		<view class='text-box' v-if="state == 1">
			<view class="text-left-box" @tap="forgot()">忘记密码</view>
			<view class="text-right-box" @tap="reg()">立即注册</view>
		</view>
		<view class="login-card" v-if="state == 2">
			<view class="login-title">账号注册</view>
			<view class="login-label">用户名</view>
			<input v-model="user_name" placeholder="请输入用户名" class="login-input" />
			<view class="login-label">手机号码</view>
			<input v-model="mobile" placeholder="请输入手机号码" class="login-input" />
			<view class="login-label">登录密码</view>
			<input v-model="password" placeholder="请输入登录密码" type="password" class="login-input" />
			<view class="login-label">验证码</view>
			<view class="login-input-box">
				<input v-model="code" placeholder="请输入验证码" class="login-input" />
				<view class="login-input-btn" @tap="getCode()">{{second == 60 ? '发送验证码' : second+'s后发送'}}</view>
			</view>
			<checkbox-group @change="argeeUserC" class="rememberStyle" style="margin: 0;margin-top: 20rpx;">
				<label>
					<checkbox value="true" checked="true"  />
					 <text style="color: black">勾选及同意用户协议</text>
					 <!-- https://new.dongjbao.com -->
					 <a href="/seller/index/userAgreement" target="_blank">《用户协议》</a>
				</label>
			</checkbox-group>
		</view>
		<view class="login-btn" @tap="submitReg()" v-if="state == 2">立即注册</view>
		<view class='text-box' v-if="state == 2">
			<view class="text-left-box" @tap="forgot()">忘记密码</view>
			<view class="text-right-box" @tap="login()">立即登录</view>
		</view>
		<view class="login-card" v-if="state == 3">
			<view class="login-title">重置密码</view>
			<view class="login-label">手机号码</view>
			<input v-model="mobile" placeholder="请输入手机号码" class="login-input" />
			<view class="login-label">新密码</view>
			<input v-model="password" placeholder="请输入新密码" type="password" class="login-input" />
			<view class="login-label">验证码</view>
			<view class="login-input-box">
				<input v-model="code" placeholder="请输入验证码" class="login-input" />
				<view class="login-input-btn" @tap="getCode()">{{second == 60 ? '发送验证码' : second+'s后发送'}}</view>
			</view>
		</view>
		<view class="login-btn" @tap="submitForgot()" v-if="state == 3">立即重置</view>
		<view class='text-box' v-if="state == 3">
			<view class="text-left-box" @tap="login()">立即登录</view>
			<view class="text-right-box" @tap="reg()">立即注册</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				state: 1,
				mobile: '',
				password: '',
				user_name:'',
				code: '',
				second: 60,
				timer: '',
				no: '',
				rememberPsw: true,
				argeeUser:true
			}
		},
		onLoad(e) {
			if (e.no) {
				this.no = e.no;
				if (this.no) {
					this.saveNo();
				}
			}
		},
		mounted() {
			const mobileS = uni.getStorageSync('mobileS');
			const passwordS = uni.getStorageSync('passwordS');
			console.log(mobileS);
			console.log(passwordS);
			//有账号、密码就赋值给文本，没有就清空
			if (mobileS && passwordS) {
				this.mobile = mobileS;
				this.password = passwordS;
			}
		},
		methods: {
			rememberC(e) {
				e.target.value[0] ? this.rememberPsw = true : this.rememberPsw = false
				console.log(this.rememberPsw);
			},
			argeeUserC(e) {
				e.target.value[0] ? this.argeeUser = true : this.argeeUser = false
				console.log(this.argeeUser);
			},
			forgot() {
				this.state = 3;
				this.password = '';
				this.code = '';
				this.sencond = 60;
				this.timer = '';
			},
			reg() {
				this.state = 2;
				this.password = '';
				this.code = '';
				this.sencond = 60;
				this.timer = '';
			},
			login() {
				this.state = 1;
				this.password = '';
				this.code = '';
				this.sencond = 60;
				this.timer = '';
			},
			loginDo() {
				if (!this.mobile) return this.toast('请输入手机号码');
				if (this.mobile.length != 11) return this.toast('请输入正确的手机号码');
				if (!this.code) return this.toast('请输入验证码');
				this.ajax('login/loginDo', {
					data: {
						mobile: this.mobile,
						code: this.code,
						no: this.no
					},
					success: (res) => {
						console.log(res);
						this.toast(res.msg);
						if (res.code) {
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index/index'
								})
							}, 1000)
						}
					}
				});
			},

			submitLogin() {
				if (!this.mobile) return this.toast('请输入手机号码');
				if (this.mobile.length != 11) return this.toast('请输入正确的手机号码');
				if (!this.password) return this.toast('请输入登录密码');
				if (this.rememberPsw) {
					uni.setStorageSync('mobileS', this.mobile);
					uni.setStorageSync('passwordS', this.password);
				} else {
					uni.removeStorageSync('mobileS');
					uni.removeStorageSync('passwordS');
				}
				this.ajax('login/pwdLogin', {
					data: {
						mobile: this.mobile,
						password: this.password,
					},
					success: (res) => {
						console.log(res);
						this.toast(res.msg);
						if (res.code) {
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index/index'
								})
							}, 1000)
						}
					}
				})
			},
			submitReg() {
				if (!this.mobile) return this.toast('请输入手机号码');
				if (this.mobile.length != 11) return this.toast('请输入正确的手机号码');
				if (!this.password) return this.toast('请输入登录密码');
				if (!this.code) return this.toast('请输入手机验证码');
				if (!this.argeeUser) return this.toast('请勾选用户协议');
				this.ajax('login/regDo', {
					data: {
						mobile: this.mobile,
						password: this.password,
						code: this.code,
						no: this.no,
						user_name:this.user_name
					},
					success: (res) => {
						this.toast(res.msg);
						if (res.code) {
							this.login();
						}
					}
				})
			},
			submitForgot() {
				if (!this.mobile) return this.toast('请输入手机号码');
				if (this.mobile.length != 11) return this.toast('请输入正确的手机号码');
				if (!this.password) return this.toast('请输入新登录密码');
				if (!this.code) return this.toast('请输入手机验证码');
				this.ajax('login/forgotDo', {
					data: {
						mobile: this.mobile,
						password: this.password,
						code: this.code,
					},
					success: (res) => {
						this.toast(res.msg);
						if (res.code) {
							this.login();
						}
					}
				})
			},


			saveNo() {
				if (!this.no) return;
				this.ajax('login/loginDo', {
					data: {
						no: this.no
					},
					success: (res) => {
						console.log(res);
					}
				});
			},
			getCode() {
				if (this.second != 60) return false;
				if (!this.mobile) return this.toast('请输入手机号码');
				if (this.mobile.length != 11) return this.toast('请输入正确的手机号码');
				this.ajax('login/mobileDo', {
					data: {
						mobile: this.mobile
					},
					success: (res) => {
						this.toast(res.msg);
						if (res.code) {
							this.second--;
							this.timer = setInterval(() => {
								if (this.second > 0) {
									this.second--;
								} else {
									this.second = 60;
									clearInterval(this.timer);
								}
							}, 1000);
						}
					}
				});
			},
		}
	}
</script>

<style>
	@import url("@/static/css/login/login.css");
</style>